<template>
  <div class="login-container">
    <div class="login-info">
      <div class="title">登录</div>
      <el-form ref="ruleFormRef" :model="userInfo" :rules="rules">
        <el-form-item>
            <el-form-item prop="username">
              <el-input v-model="userInfo.username" :prefix-icon="User"/>
            </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-form-item prop="password">
            <el-input v-model="userInfo.password" :prefix-icon="Lock" type="password"/>
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login(ruleFormRef)" style="width: 100%" :loading="loading">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { User, Lock } from '@element-plus/icons-vue'
import useUserStore from "@/store/modules/user";
import {ElMessage, ElNotification, FormInstance, FormRules } from "element-plus";
import {useRouter} from "vue-router";

interface RuleForm {
  username: String
  password: String
}
const ruleFormRef = ref<FormInstance>()
const userInfo = reactive<RuleForm>({
  username: 'admin',
  password: 'atguigu123'
})
const rules = reactive<FormRules<RuleForm>>({
  username: [
    { min: 3, max: 5, message: '长度在3～5位', trigger: 'blur' },
  ],
  password: [
    { min: 6, max: 10, message: '长度在6～8位', trigger: 'blur' },
  ],
})

let loading = ref(false)

let userStore = useUserStore()
let router = useRouter()
const login = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      loading.value = true
      try {
        await userStore.userLogin(userInfo)
        await router.push('/')
        ElNotification({
          title: '登录成功',
          message: time(),
          type: 'success',
        })
        loading.value = false
      } catch (e) {
        loading.value = false
        ElMessage.error(e.message)
      }
    } else {
      console.log('error submit!', fields)
    }
  })


}
// 判断时间点
const time = () => {
  let hour = new Date().getHours()
  if (hour > 0 && hour <= 9) {
    return '早上好'
  } else if (hour > 9 && hour <= 13) {
    return '中午好'
  }  else if (hour > 13 && hour <= 16) {
    return '下午好'
  } else {
    return '晚上好'
  }
}
</script>

<style scoped lang="scss">
.login-container{
  position: relative;
  width: 100%;
  height: 100vh;
  background: url("../../assets/images/background.jpg") no-repeat;
  background-size: 100% 100%;

  .login-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 40%;
    right: 20%;
    transform: translateY(-50%);
    width: 450px;
    height: 300px;
    background: url("../../assets/images/login_form.png") no-repeat;
    background-size: 100% 100%;

    .title{
      font-size: 40px;
      text-align: center;
      color: whitesmoke;
      margin-bottom: 20px;
    }
  }
}
</style>
